﻿<template>
  <div>
    <video-player class = "vjs-custom-skin"
    ref = "videoPlayer"
    :options = "playerOptions"
    :playsinline = "true"
    @statechanged = "playerStateChanged($event)">
  </video-player>
  </div>
</template>

<script>
import 'video.js/dist/video-js.css'
import '@/components/common/theVideoPlayer.css'
import { videoPlayer } from 'vue-video-player'
export default {
  components: {
    videoPlayer
  },
  props: ['videoSrc'],
  created () {
    // 获取video的src
    this.getVideoPlayerSrc()
  },
  data () {
    return {
      playerOptions: {
        muted: false,
        controls: true,
        language: 'zh',
        preload: true,
        height: 300,
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [{
          type: 'video/mp4',
          src: ''
          // src: 'http://vjs.zencdn.net/v/oceans.mp4'
          // src: 'https://api.whfjwl.com:8990/fileset/39283d1a-6db0-4b7b-b3ae-7cc9b4c6209b'
        }]
      }
    }
  },
  computed: {
    // player () {
    //   return this.$refs.videoPlayer.player
    // }
  },
  methods: {
    // 改变video的地址
    getVideoPlayerSrc () {
      let videoSrcshow = this.videoSrc
      if (!videoSrcshow) {
        return
      }
      if (videoSrcshow.indexOf('/name/') !== -1) {
        videoSrcshow = videoSrcshow.slice(0, videoSrcshow.indexOf('/name/'))
      }
      if (videoSrcshow.indexOf('/dl/') !== -1) {
        videoSrcshow = videoSrcshow.replace('/dl/', '/')
      }
      this.$set(this.playerOptions.sources[0], 'src', videoSrcshow)
    },
    playerStateChanged (event) {
      console.log(event)
    }
  },
  watch: {
    videoSrc: {
      deep: true,
      handler (val) {
        this.getVideoPlayerSrc()
      }
    }
  }
}
</script>
